<template>
  <div class="container">
    <search />
    <inform />
    <div class="sign">查询结果:</div>
    <div class="result">
      <img v-if="type===1" src="@/assets/1.png" alt class="result-pic">
      <img v-if="type===2" src="@/assets/2.png" alt class="result-pic">
      <img v-if="type===3" src="@/assets/3.png" alt class="result-pic">
      <img v-if="type===4" src="@/assets/4.png" alt class="result-pic">
      <div class="name">{{ $store.state.utils.search.name }}</div>
      <!-- 未收录 -->
      <div v-if="type===0" class="notfind">抱歉! 暂未收录您所查询的物品!</div>
    </div>
  </div>
</template>
<script>
import search from '@/components/search'
import inform from '@/components/inform'
export default {
    components: { search, inform },
    computed: {
        type() {
            const type = this.$store.state.utils.search.rubbish_type
            if (type === '可回收垃圾') {
                return 1
            } else if (type === '厨余垃圾') {
                return 2
            } else if (type === '有害垃圾') {
                return 3
            } else if (type === '其他垃圾') {
                return 4
            } else {
                return 0
            }
        }
    },
    created() {
        console.log(this.$store.state.utils.search)
    }
}
</script>
<style lang="less" scoped>
.container {
  width: 94%;
  margin: 0 auto;
  .sign {
    font-size: 14px;
  }
  .notfind {
    font-size: 14px;
    color: #666;
  }
  .result {
    position: relative;
    margin-top: 3%;
    text-align: center;
    .result-pic {
      width: 100%;
    }
    .name {
      width: 100%;
      font-size: 24px;
      font-weight: bold;
      position: absolute;
      top: 10%;
      color: #fff;
    }
  }
  // .produce {
  //   width: 100%;
  //   position: fixed;
  //   bottom: 10px;
  //   text-align: center;
  //   font-size: 14px;
  //   color: #b8b8b8;
  // }
}
</style>
